<template>
    <div>
        <el-card style="margin: 20px 0">
            <!-- 全局组件 -->
            <CategorySelect
                @getCategoryId="getCategoryId"
                :isUse="scene != 0"
            ></CategorySelect>
        </el-card>
        <!-- 底部这里是有三部分进行切换的 -->
        <el-card style="margin: 20px 0">
            <div v-show="scene == 0">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="!category3Id"
                    @click="addSpu"
                    >添加SPU</el-button
                >
                <el-table :data="spuList" style="width: 100%" border="">
                    <el-table-column
                        type="index"
                        label="序号"
                        width="80"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="spuName"
                        label="spu名称"
                        width="width"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="description"
                        label="spu描述"
                        width="width"
                    >
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template #default="{ row, $index }">
                            <!-- 这里的按钮用hintButton替换 -->
                            <HintButton
                                title="添加sku"
                                type="success"
                                icon="el-icon-plus"
                                size="mini"
                                @click="addSku(row)"
                            ></HintButton>
                            <HintButton
                                title="修改spu"
                                type="warning"
                                icon="el-icon-edit"
                                size="mini"
                                @click="updateSpu(row)"
                            ></HintButton>
                            <HintButton
                                title="查看当前spu的sku列表"
                                type="info"
                                icon="el-icon-info"
                                size="mini"
                                @click="handlerDialogTable(row)"
                            ></HintButton>
                            <el-popconfirm
                                title="这是一段内容确定删除吗？"
                                @onConfirm="deleteSpu(row)"
                            >
                                <HintButton
                                    slot="reference"
                                    title="删除spu"
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                ></HintButton>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    style="margin-top: 20px; text-align: center"
                    :current-page="page"
                    :page-sizes="[3, 5, 10]"
                    :page-size="limit"
                    layout=" prev, pager, next, jumper, -> , sizes, total"
                    :total="total"
                >
                </el-pagination>
            </div>
            <SpuForm
                v-show="scene == 1"
                @changeScene="changeScene"
                ref="spu"
            ></SpuForm>
            <SkuForm
                v-show="scene == 2"
                ref="sku"
                @changeScene="changeScene"
            ></SkuForm>
        </el-card>
        <!-- 查看sku列表弹出的对话框 -->
        <el-dialog
            :title="`${spu.spuName}的sku列表数据`"
            :visible.sync="dialogTableVisible"
            :before-close="close"
        >
            <el-table :data="skuList" v-loading="loading">
                <el-table-column
                    property="skuName"
                    label="名称"
                ></el-table-column>
                <el-table-column
                    property="price"
                    label="价格"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="weight"
                    label="重量"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="prop"
                    label="默认图片"
                    align="center"
                >
                    <template #default="{ row, $index }">
                        <img
                            :src="row.skuDefaultImg"
                            style="width: 100px; height: 100px"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import SpuForm from "./SpuForm"
import SkuForm from "./SkuForm"
import { done } from 'nprogress'

export default {
    name: "Spu",
    data() {
        return {
            category1Id: "",
            category2Id: "",
            category3Id: "",
            // 当前页数
            page: 1,
            // 每页数据显示量
            limit: 3,
            total: 0, // 分页器一共需要展示多少条数据
            spuList: [], // spu列表数据
            scene: 0, // 0代表展示spu列表数据 1 添加spu|修改spu 2 添加sku
            dialogTableVisible: false, // 控制对话框显示与隐藏
            spu:{},
            skuList: [], // sku列表的数据
            loading: true
        }
    },
    components: {
        SpuForm,
        SkuForm,
    },
    methods: {
        // 三级联动的自定义事件，把子组件的相应id传递给父组件
        getCategoryId({ categoryId, level }) {
            // categoryId获取一、二、三级分类id
            // level：区分几级id
            if (level == 1) {
                this.category1Id = categoryId
                // 清除二、三级分类id
                this.category2Id = ""
                this.category3Id = ""
            } else if (level == 2) {
                this.category2Id = categoryId
                // 清除三级id
                this.category3Id = ""
            } else {
                // 代表三级id都有了就可以法请求了
                this.category3Id = categoryId
                // 发请求获取平台的属性数据
                this.getSpuList()
            }
        },
        // 获取spu列表数据
        async getSpuList() {
            const { page, limit, category3Id } = this
            // 携带三个参数发送请求
            const result = await this.$API.spu.reqGetSpuList(
                page,
                limit,
                category3Id
            )
            if (result.code == 200) {
                this.total = result.data.total
                this.spuList = result.data.records
            }
        },
        // 分页器切换当前页数按钮的回调
        handleCurrentChange(page) {
            this.page = page
            // 再次获取数据
            this.getSpuList()
        },
        // 分页器每页显示条数变化时触发的回调
        handleSizeChange(limit) {
            this.limit = limit
            // 再次获取数据
            this.getSpuList()
        },
        // 添加spu按钮的回调
        addSpu() {
            // 显示添加spu或修改spu的界面
            this.scene = 1
            // 通知子组件SpuForm发送请求
            this.$refs.spu.addSpuData(this.category3Id)
        },
        // 修改spu按钮的回调
        updateSpu(row) {
            // 显示添加spu或修改spu的界面
            this.scene = 1
            // 获取子组件SpuForm
            // 在父组件当中可以通过$ref获取子组件等等
            this.$refs.spu.initSpuData(row)
        },
        // 自定义事件的回调，SpuForm
        changeScene({ scene, flag }) {
            // flag这个形参为了保存按钮是添加还是修改
            // 切换结构
            this.scene = scene
            // 再次请求数据
            if (flag == "修改") {
                // 停留在当前页
                this.getSpuList()
            } else {
                // 跳转到第一页
                this.handleCurrentChange(1)
            }
        },
        // 删除spu
        async deleteSpu({ id }) {
            // 发送请求
            const result = await this.$API.spu.reqDeleteSpu(id)
            if (result.code == 200) {
                this.getSpuList()
                this.$message({
                    type: "success",
                    message: "删除spu成功",
                })
                // 当前页没数据返回上一页的判断
                this.handleCurrentChange(
                    this.spuList.length > 1 ? this.page : this.page - 1
                )
            }
        },
        // 添加sku按钮的回调
        addSku(row) {
            // 切换场景为2
            this.scene = 2
            const { category1Id, category2Id } = this
            // 父组件调用子组件的方法，让子组件发请求-----三个请求
            this.$refs.sku.getData(row, category1Id, category2Id)
        },
        // 显示sku列表的对话框回调
        async handlerDialogTable(row){
            // 显示对话框
            this.dialogTableVisible = true
            // 保存spu信息
            this.spu = row
            // 发送请求
            const result = await this.$API.spu.reqFindSkuBySquId(row.id)
            if(result.code == 200){
                this.skuList = result.data
                // loading隐藏
                this.loading = false
            }
        },
        // 对话框关闭前的回调
        close(done){
            this.loading = true
            // 清空数据
            this.skuList = []
            // 关闭dialog
            done()
        }
    },
}
</script>

<style>
</style>